window.onload = () => {
    // !侧边栏 
    $('.aside').height(document.documentElement.scrollHeight);
    // !判断用户名
    if (localStorage.getItem('username')) {
        $('#username').html(`<a href="javascript:;">${localStorage.getItem('username')}</a>`)
    }

    // !购物车列表展示
    let id = localStorage.getItem('uid');
    let params = { id };
    axios.get(cartListAPI, { params })
        .then(({ data }) => {
            let arr = data.data;
            topNum()
            let list = arr.map(arr => {
                return `
                <li>
                <div class="t-body-check">
                    <input type="checkbox" class="check">
                </div>
                <div class="t-body-commodity" >
                    <img src="${arr.pimg}" alt="">
                    <p>${arr.pname}</p>
                    <p>${arr.pdesc}</p>
                </div>
                <p class="pprice">￥<span class="close-price">${arr.pprice}</span></p>
                <div class="add">
                    <span class="loseNum">-</span>
                    <input type="text" value="${arr.pnum}" class="NumContent">
                    <span class="addNum">+</span>
                </div>
                <p class="sum">¥<span>${(arr['pnum'] * arr['pprice']).toFixed(2)}</span></p>
                <button class="del" data-pid="${arr.pid}">删除</button>
            </li>
                `
            });
            $('.car-tbody ul').html(list.join(''));
            deleteCar()
            select()
            addNum()
            loseNum()
            totalMoney()
            yesNo()
        });

    // ! 判断有无商品
    function yesNo() {
        if ($('.car-tbody ul').children().length == 0) {
            $('.close-w').css('display', 'none')
            $('.car-body').css('display', 'none')
            $('.car0').css('display', 'block')
        } else {
            $('.close-w').css('display', 'block')
            $('.car-body').css('display', 'block')
            $('.car0').css('display', 'none')
        }
    }
    // !商品数量
    function topNum() {
        let params = { id };
        axios.get(cartListAPI, { params })
            .then(({ data }) => {
                let arr = data.data
                $('.car-top .left span').text(arr.length)
                if (arr.length >= 4) {
                    // ! 监听滚动条
                    $(window).on('scroll', () => {
                        let gdt = document.documentElement.scrollTop
                        if (gdt >= 65) {
                            $('.close-w').removeClass('fix')
                        } else {
                            $('.close-w').addClass('fix')
                        }
                    })
                } else {
                    $(window).off('scroll');
                    $('.close-w').removeClass('fix');
                    console.log(111111111);
                }
            })
    }
    // ! 小计
    function sum(num, price) {
        let sum = (parseInt(num) * parseInt(price)).toFixed(2);
        return sum;
    }
    // ! 删除
    function deleteCar() {
        let uid = id
        $('.del').on('click', function() {
            let pid = $(this).attr('data-pid')
            params = { uid, pid }
            axios.get(cartDeleteAPI, { params })
                .then(res => {
                    alert(res.data.msg)
                    $(this).parent().remove()
                    topNum()
                    totalMoney()
                    yesNo()
                    let flag = $('.check').get().every(input => input.checked === true);
                    $('#checkAll').prop('checked', flag)
                    $('#closecheckAll').prop('checked', flag)
                })
        })
    }
    // ! 加法
    function addNum() {
        $('.addNum').on('click', function() {
            let num = $(this).prev().val();
            let pid = $(this).parent().next().next().attr('data-pid');
            $(this).prev().val(++num);
            updateCar(pid, num);
            // ? 小计
            let price = $(this).parent().prev().children().text();
            let sums = sum(num, price);
            $(this).parent().next().children().text(`${sums}`);
            totalMoney()
        })
    }
    // ! 减法
    function loseNum() {
        $('.loseNum').on('click', function() {
            let num = $(this).next().val()
            if (num >= 2) {
                let pid = $(this).parent().next().next().attr('data-pid')
                $(this).next().val(--num)
                updateCar(pid, num)
                    // ? 小计
                let price = $(this).parent().prev().children().text()
                let sums = sum(num, price)
                $(this).parent().next().children().text(`${sums}`)
                totalMoney()
            } else {
                num = 1
            }
        })
    }
    // ! 更新
    function updateCar(pid, num) {
        let uid = id
        let pnum = num
        let params = { uid, pid, pnum }
        axios.get(cartUpdateAPI, { params })
            .then(res => {
                console.log(res);
            })
    }
    // ! 选择
    function select() {
        // ? top全选 
        $('#checkAll').on('click', () => {
            $('.check').prop('checked', $('#checkAll').prop('checked'));
            $('#closecheckAll').prop('checked', $('#checkAll').prop('checked'));
            if ($('.check').prop('checked')) {
                $('.check').parent().parent().css('background-color', '#fff4e8')
            } else {
                $('.check').parent().parent().css('background-color', '#fff')
            }
            totalMoney()
        });
        // ? bottom 全选
        $('#closecheckAll').on('click', () => {
            $('.check').prop('checked', $('#closecheckAll').prop('checked'));
            $('#checkAll').prop('checked', $('#closecheckAll').prop('checked'));
            totalMoney()
            if ($('.check').prop('checked')) {
                $('.check').parent().parent().css('background-color', '#fff4e8')
            } else {
                $('.check').parent().parent().css('background-color', '#fff')
            }
        });
        // ? 单选
        $('.check').on('click', function() {
            totalMoney()
                // ? every 判断数组中每一个元素都没满足条件
            let flag = $('.check').get().every(input => input.checked === true);
            $('#checkAll').prop('checked', flag);
            $('#closecheckAll').prop('checked', flag);
            console.log($(this).prop('checked'));
            if ($(this).prop('checked')) {
                $(this).parent().parent().css('background-color', '#fff4e8')
            } else {
                $(this).parent().parent().css('background-color', '#fff')
            }
        });
    }

    // ! 计算总价
    function totalMoney() {
        // ? 获取被选中的复选框
        let filterArr = $($('.check').get().filter(v => v.checked === true));
        if (filterArr.length == 0) {
            $('#closeMoney').text('0.00');
            $('#closeNum').text('0');
        }
        let pMoney = 0;
        let pNum = 0;
        filterArr.each((i, v) => {
            pMoney += $(v).parent().parent().children().eq(2).children().text() * $(v).parent().parent().children().eq(3).children().eq(1).val();
            pNum += parseInt($(v).parent().parent().children().eq(3).children().eq(1).val());
            $('#closeMoney').text(pMoney.toFixed(2));
            $('#closeNum').text(parseInt(pNum));
        });
    }

    // ! 删除所选中的商品
    delSelect()

    function delSelect() {
        $('.close a').on('click', function() {
            let filterArr = $($('.check').get().filter(v => v.checked === true))
            filterArr.each((i, v) => {
                $(v).parent().parent().children().eq(5).click()
            })
            yesNo()
        })
    }
}